{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import datetime %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    'bundles/icsocivr/css/zTreeStyle.css'
    '@datepicker_css'
    '@chosen_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
<script type="application/javascript">
    var statistical_type = 'agent';
</script>
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-body">
                <div class="widget-header">
                    <h5 class="widget-title">{{ 'Report Condition'|trans }}</h5>
                </div>
                <div class="widget-main no-padding">
                    <form action="javascript:loading_chart()" method="post" id="searchForm">
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="time_stamp">{{ 'Statistical Cycle'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <select id="time_stamp" class="input-sm" onchange="setDatetimepicker(this.value)">
                                        <option value="0">{{ 'Stamp Date'|trans }}</option>
                                        <option value="1">{{ 'Stamp Month'|trans }}</option>
                                        <option value="2">{{ 'Stamp Custom'|trans }}</option>
                                    </select>
                                </td>
                                {% if type.agent is defined and type.agent == 1 and type.group is defined and type.group == 1 %}
                                <td class="col-xs-4" colspan="2" style="border-left-width: 0px;">
                                    {% if type.agent is defined and type.agent == 1 %}
                                        <label>
                                            <input type="radio" class="ace" id="type_que" name="search_type" checked value="agent" onclick="statistical_type='agent';loading_tree('agent')">
                                            <span class="lbl"> {{ 'By Queue'|trans }}</span>
                                        </label>
                                    {% endif %}
                                    {% if type.group is defined and type.group == 1 %}
                                        <label>
                                            <input type="radio" class="ace" id="type_group" name="search_type" value="group" onclick="statistical_type='group';loading_tree('group')">
                                            <span class="lbl"> {{ 'By Group'|trans }}</span>
                                        </label>
                                    {% endif %}
                                </td>
                                {% else %}
                                <td id="statistical_range" colspan="2" rowspan="3" class="col-xs-6" style="display: none">
                                    <div style="height: 99px;overflow: auto;"><ul id="treeDemo" class="ztree"></ul></div>
                                </td>
                                {% endif %}
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="start_date">{{ 'Date'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    {{ datetime('start_date',date.startDate) }}
                                    {{ datetime('end_date',date.endDate) }}
                                </td>
                                {% if type.agent is defined and type.agent == 1 and type.group is defined and type.group == 1 %}
                                <td id="statistical_range" colspan="2" rowspan="2" class="col-xs-6" style="display: none">
                                    <div style="height: 99px;overflow: auto;"><ul id="treeDemo" class="ztree"></ul></div>
                                </td>
                                {% endif %}
                            </tr>
                            <tr id="statistical_type" style="display: none">
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label>{{ 'Statistical Type'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    {% if type.agent is defined and type.agent == 1 %}
                                    <label>
                                        <input type="radio" class="ace" id="type_agent" name="type" checked value="agent">
                                        <span class="lbl"> {{ 'By Agent'|trans }}</span>
                                    </label>
                                    {% endif %}
                                    {% if type.queue is defined and type.queue == 1 %}
                                    <label>
                                        <input type="radio" class="ace" id="type_queue" name="type" checked value="queue" onclick="statistical_type='queue';loading_tree('queue')">
                                        <span class="lbl"> {{ 'By Queue'|trans }}</span>
                                    </label>
                                    {% endif %}
                                    {% if type.number is defined and type.number == 1 %}
                                        <label>
                                            <input type="radio" class="ace" id="type_queue" name="type" checked value="number" onclick="statistical_type='number';loading_tree('number')">
                                            <span class="lbl"> {{ 'By Number'|trans }}</span>
                                        </label>
                                    {% endif %}
                                    {% if type.date is defined and type.date == 1 %}
                                    <label>
                                        <input type="radio" class="ace" id="type_date" name="type" checked value="date">
                                        <span class="lbl"> {{ 'By Date'|trans }}</span>
                                    </label>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-center">
                                    <button id="loading-btn" type="submit" class="btn btn-info btn-sm">
                                        <i class="ace-icon fa fa-search"></i> {{ 'Inquiry'|trans }}
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
        <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {% javascripts
    'bundles/icsocivr/js/jquery.ztree.all-3.5.min.js'
    'bundles/icsocreport/js/echarts-all.js'
    '@datepicker_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="application/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $(document).ready(function() {
            {% if type.agent is defined and type.agent == 1 and type.group is defined and type.group == 1 %}
            $('#main').css('height',$(document).height() - 240);
            {% else %}
            $('#main').css('height',$(document).height() - 200);
            {% endif %}
            /**
             * 设置统计周期
             */
            var time_stamp = $('#time_stamp').val();
            $('#start_date').datetimepicker();
            setDatetimepicker(time_stamp);

            /**
             * 加载统计范围
             */
            {% if statistical_range is defined and statistical_range == 1 %}
                statistical_type = $("input[name='type']:checked").val();
                if (statistical_type =='date') {
                    {% if type.agent is defined and type.agent == 1 %}
                    statistical_type = 'agent';
                    {% else %}
                    statistical_type = 'queue';
                    {% endif %}
                }
                loading_tree(statistical_type);
                $('#statistical_type').show();
                $('#statistical_range').show();
            {% else %}
                $('#statistical_type').hide();
                $('#statistical_range').hide();
                statistical_type = '';
            {% endif %}


            myChart.setOption({"series":[{"name":"","type":"bar"}]});

        });

        /**
         * 加载图表
         */
        function loading_chart(magicType)
        {
            if (!$('#start_date').val()) {
                $('#start_date').parent().parent().addClass('has-error');
                $('#start_date').focus();
                return;
            }

            var data = {};
            if (statistical_type) {
                var node = [];
                var ques = [];
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = treeObj.getCheckedNodes(true);

                for(var i=0;i<nodes.length;i++){
                    if (nodes[i]['type'] == statistical_type) {
                        node.push(nodes[i]['qid']);
                    }
                    if (statistical_type == 'agent' && nodes[i]['type'] == 'queue') {
                        ques.push(nodes[i]['qid']);
                    }
                }

                node = node.join(',');

                if (node == '') {
                    alert('请选择统计范围');
                    return;
                }

                data.type = $("input[name='type']:checked").val();
                data.node = node;
                data.ques = ques.join(',');
            }

            data.time_stamp = $('#time_stamp').val();
            data.start_date = $.trim($('#start_date').val());
            data.end_date = $.trim($('#end_date').val());
            data.magicType = magicType;
            $.ajax({
                url:'{{ path(action) }}',
                data:data,
                type:'POST',
                dataType:'json',
                success:function(responce){
                    myChart.dispose();
                    myChart = echarts.init(document.getElementById('main'));
                    if (responce.code == 200) {
                        if ("undefined" != typeof responce.data.toolbox.feature.myTool && responce.data.toolbox.feature.myTool.show == 1) {
                            //responce.data.toolbox.feature.myTool.icon = "{{ asset('bundles/icsocivr/images/2.gif') }}";
                            responce.data.toolbox.feature.myTool.onclick = function (){
                                loading_chart( responce.data.toolbox.feature.myTool.magicType);
                            };
                        }
                        myChart.setOption(responce.data);
                    } else {
                        myChart.setOption({"series":[{"name":"","type":"pie"}]});
                    }
                }
            });
        }

        /**
         * 加载坐席TREE
         */
        function loading_tree(type)
        {
            var setting = {
                check: {
                    enable: true,
                    chkboxType:{
                        'Y':'ps',
                        'N':'ps'
                    }
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            $.ajax({
                url:'{{ path('icsoc_report_charts_tree') }}',
                data:{type:type},
                dataType:'json',
                success:function(responce){
                    $.fn.zTree.init($("#treeDemo"), setting, responce);
                },error:function(err,string,msg){

                }
            });
        }

        /**
         * 日期设置
         */
        function setDatetimepicker(type)
        {
            $('#start_date').data("DateTimePicker").destroy();

            switch (type) {
                case '0':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').hide();
                    break;
                case '1':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM',
                        locale: 'zh-cn'
                    }).val('{{ date.startMonth }}');
                    $('#end_date').hide();
                    break;
                case '2':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.endDate }}').show();
                    break;
            }
        }
    </script>
{% endblock %}